<template>
	<view class="job-record-page"  >
		<!-- 顶部导航栏 -->
		<u-sticky :offset-top="h">
			<!-- 标签栏 -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<text>{{ tab }}</text>
				</view>
			</view>
			<DaDropdownVue2 :fixedTopValue='h + 44' :dropdownMenu="dropdownMenuList" themeColor="#007aff"
				textColor="#333333" :duration="300" @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
			</DaDropdownVue2>
		</u-sticky>
		<!-- 内容列表 -->
		<view class="content">
			<!-- 模拟数据循环展示，可替换为实际接口数据 -->
			<scroll-view scroll-y @scrolltolower="loadMore" :style="{'height': `calc(100vh - ${upx2px}px)`}"
				:scroll-with-animation="true">
				<!-- 内容区域 -->
				
				<view v-for="(item, index) in listData" :key="index" class="job-item">
				
				
					<!-- 职位卡片 -->
					<view class="job-card">
						<view class="job-info">
							<view class="job-name-salary">
								<text class="job-name">{{ item.postName }}</text>
				
							</view>
							<view class="company-info">
								<text class="company">{{ item.customerName }}</text>
								<!-- <text class="finance-status">{{ item.financeStatus }}</text> -->
							</view>
							<view class="location-distance">
								<text class="location">推荐部门：{{ item.recommendDepteName }}</text>
								<!-- <text class="distance">推荐人：{{item.recommendUserName}}</text> -->
							</view>
							<view class="tags">
								推荐人：{{item.recommendUserName}}
							</view>
						</view>
						<view class="hr-info">
							<view class="salary" style="margin-top: 20rpx;">{{item.type == 1?'自荐':'推荐'}}</view>
				
							<view class="hr-detail">
								<text class="hr-name"> {{item.talentName}} </text>
								
							</view>
							<text class="hr-role">{{ item.phone }}</text>
							<text class="time">{{item.age}}岁</text>
						</view>
					</view>
				</view>
				
				
				<Loading :status='status'></Loading>
			
			</scroll-view>
			
			
		</view>
	</view>
</template>

<script>
	import {taskPage} from '@/api/genjin/genjin.js'
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	import {
		getNavigationBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js';
	import Loading from '@/components/loading/loading.vue'
	export default {
		components: {
			DaDropdownVue2,
			Loading
		},
		data() {
			return {
				// 顶部标签
				tabs: ["待面试", "待入职", "全部"],
				// 当前选中标签索引
				currentTab: 0,
				status: 'loadmore',
				upx2px: uni.upx2px(400),
				// 模拟求职记录数据，实际需通过接口请求获取
				queryParams:{
					pageNum:1,
					pageSize:10
				},
				dropdownMenuList: [{
						title: '结算类型',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: '日结',
								value: 0
							},
							{
								label: '月结',
								value: 1
							},
						],
					},
					{
						title: '岗位',
						type: 'cell',
						prop: 'god2',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: '日结',
								value: 0
							},
							{
								label: '月结',
								value: 1
							},
						],
					},
					{
						title: '薪资类型',
						type: 'cell',
						prop: 'god3',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: '日结',
								value: 0
							},
							{
								label: '月结',
								value: 1
							},
						],
					},
					{
						title: '工作类型',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: '日结',
								value: 0
							},
							{
								label: '月结',
								value: 1
							},
						],
					}
				],
				// listData: [{
				// 		date: "4月16日",
				// 		jobName: "网站开发工程师",
				// 		salary: "8-12K",
				// 		company: "徐州奥特莱斯购物...",
				// 		financeStatus: "不需要融资",
				// 		location: "徐州",
				// 		distance: "约23.8千米",
				// 		tags: ["徐州", "3-5年", "大专"],
				// 		hrAvatar: "https://example.com/avatar1.png",
				// 		hrName: "刘女士",
				// 		hrRole: "人事主管 HR",
				// 		time: "15:13",
				// 	},
				// 	{
				// 		date: "4月4日",
				// 		jobName: "uni-app 前端开发工程师（7k-12k）",
				// 		salary: "7-12K",
				// 		company: "曙源通信",
				// 		financeStatus: "",
				// 		location: "徐州 泉山区 西苑",
				// 		distance: "约4.3千米",
				// 		tags: ["5-10年", "本科"],
				// 		hrAvatar: "https://example.com/avatar2.png",
				// 		hrName: "魏福权",
				// 		hrRole: "经理",
				// 		time: "17:39",
				// 	},
				// 	{
				// 		date: "4月4日",
				// 		jobName: "高级前端开发工程师",
				// 		salary: "5-8K",
				// 		company: "国顺智能",
				// 		financeStatus: "未融资",
				// 		location: "徐州 云龙区 新城区",
				// 		distance: "约3.2千米",
				// 		tags: ["3-5年", "本科"],
				// 		hrAvatar: "https://example.com/avatar3.png",
				// 		hrName: "卞晓培",
				// 		hrRole: "招聘者",
				// 		time: "17:39",
				// 	},
				// 	{
				// 		date: "4月4日",
				// 		jobName: "web 前端工程师",
				// 		salary: "8-12K",
				// 		company: "北京龙软徐州分公司",
				// 		financeStatus: "已上市",
				// 		location: "徐州 泉山区 矿业大学",
				// 		distance: "约603米",
				// 		tags: ["1-3年", "本科"],
				// 		hrAvatar: "https://example.com/avatar4.png",
				// 		hrName: "李强",
				// 		hrRole: "技术经理",
				// 		time: "17:38",
				// 	},
				// 	{
				// 		date: "",
				// 		jobName: "前端开发工程师",
				// 		salary: "",
				// 		company: "徐州华兴公司",
				// 		financeStatus: "",
				// 		location: "徐州",
				// 		distance: "约668米",
				// 		tags: ["1-3年", "大专"],
				// 		hrAvatar: "",
				// 		hrName: "",
				// 		hrRole: "",
				// 		time: "",
				// 		status: "停止招聘",
				// 	},
				// ],
				listData:[],
			};
		},
		computed: {
			h() {
				return getNavigationBarHeight() + getTitleBarHeight()
			}
		},
		mounted() {
			this.taskPage(this.queryParams)
		},
		methods: {
			loadMore(){
				if(this.status == "nomore")return
				console.log('底部触发')
				this.status = 'loading'
				this.queryParams.pageNum +=1
				this.taskPage(this.queryParams)
			},
			async taskPage(data){
				let res = await taskPage(data)
				console.log(res,"招聘跟进")
				if(res.code == 200){
					if(this.listData.length < res.total){
						this.listData = [...this.listData,...res.rows]
					}else{
						this.status = "nomore"
					}
				}
			},
			handleConfirm(v) {
				console.log('handleConfirm ==>', v)
			},
			handleClose(v) {
				console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
			// 返回按钮逻辑
			onBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 切换标签逻辑
			switchTab(index) {
				this.currentTab = index;
				// 实际可根据标签切换请求不同数据，这里简单演示
				// 比如 if (index === 0) { this.getViewedList() } 等
			},
		},
	};
</script>

<style scoped>
	/* 页面整体样式 */
	.job-record-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	.navbar {
		/* display: flex; */
		align-items: center;
		height: 88px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		/* padding: 0 30px; */
		/* position: fixed; */
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.back-btn {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-back {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	/* 标签栏样式 */
	.tab-bar {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #666;
	}

	.tab-item.active {
		color: #007aff;
		border-bottom: 4rpx solid #007aff;
	}

	/* 内容区域样式 */
	.content {
		/* padding: 20rpx; */

	}

	/* 日期标题样式 */
	.date-title {
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #999;
	}

	/* 职位卡片样式 */
	.job-item {
		margin-bottom: 10rpx;
	}

	.job-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.job-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.job-name-salary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.job-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.salary {
		font-size: 15px;
		color: #00b26a;
	}

	.company-info {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.company {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.finance-status {
		font-size: 28rpx;
		color: #666;
	}

	.location-distance {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.location {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.distance {
		font-size: 28rpx;
		color: #666;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 6rpx 12rpx;
		font-size: 24rpx;
		color: #666;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/* HR 信息样式 */
	.hr-info {
		width: 240rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hr-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.hr-detail {
		text-align: center;
		margin-bottom: 10rpx;
	}

	.hr-name {
		font-size: 26rpx;
		color: #333;
	}

	.hr-role {
		font-size: 24rpx;
		color: #999;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}
</style>